<template>
    <div class="table-box">
      <!-- <div class="table-search">
        <div class="btn-box">
          <el-button type="primary" @click="onAdd">新增</el-button>
          <el-button type="primary" plain @click="onExport">导出</el-button>
        </div>
      </div>-->
      <div class="table-search">
        <el-form :inline="true" :model="form">
          <el-form-item label="游戏id">
            <el-input v-model="form.game_id" placeholder="游戏ID" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onQuery">查询</el-button>
            <el-button @click="onReset">重置</el-button>
            <el-button type="primary" @click="onAdd">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="card content-box">
        <div class="table">
          <el-table :data="tableData" border v-loading="loading">
            <el-table-column prop="id" label="ID" align="center" />
            <el-table-column prop="title" label="标题" align="center" />
            <el-table-column prop="show_number" label="APP每行显示个数" align="center" />
            <el-table-column prop="game_id" label="游戏记录ID" align="center" />
            <el-table-column prop="rank" label="排序" align="center" />
            <el-table-column prop="is_hide" label="是否隐藏" align="center">
              <template #default="scope">
                <el-tag :type="scope.row.is_hide == 1 ? 'danger' : 'success'">{{ scope.row.is_hide ? "隐藏" : "显示" }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="180px">
              <template #default="scope">
                <el-button
                  type="primary"
                  plain
                  @click="handleOperate(scope.$index, scope.row, 'edit')"
                >编辑</el-button>
                <!-- <el-button type="danger" @click="handleOperate(scope.$index, scope.row, 'delete')">删除</el-button> -->
              </template>
            </el-table-column>
          </el-table>
          <div class="table-pagination">
            <el-pagination
              :current-page="pageable.pageNum"
              :page-size="pageable.pageSize"
              :page-sizes="[10, 25, 50, 100]"
              :background="true"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageable.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </div>
        </div>
      </div>
      <DialogForm
        @cancel="cancel"
        @closeDialog="closeDialog"
        @submitForm="submit"
        :dialogFormVisible="dialogVisible"
        :dialogForm="dialogForm"
        :btnLoading="btnLoading"
        :gameCategoryList="gameCategoryList"
      />
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, reactive } from "vue";
  import { formatterTime} from "@/utils/utils";
  import {
    gameRecommendListApi,
    gameRecommendUpdateApi,
    gameCategoryApi
  } from "@/api/slotsgame/game/game";
  import DialogForm from "./components/dialogForm.vue";
  const loading = ref(false);
  const tableData = ref([]);
  const dialogVisible = ref(false);
  const btnLoading = ref(false);
  const btnType = ref(null);
  const gameCategoryList = ref([]); //游戏分类
  const formData = {
    game_id: "",
  };
  const form = reactive({ ...formData });
  const pageable = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0
  });
  const dialogFormData = {
    id: "",
    title: "",
    show_number: "",
    game_id: "",
    is_hide: "",
    rank: "",
  };
  const dialogForm = reactive({ ...dialogFormData });
  // 参数
  const param = () => {
    return {
      page: pageable.pageNum,
      pagesize: pageable.pageSize,
      game_id: form.game_id,
    };
  };
  // 获取游戏分类
const getGameCategoryList = async () => {
  try {
    const res = await gameCategoryApi({page:1, pagesize: 200});
    gameCategoryList.value = res.data.results;
  } catch (error) {
    gameCategoryList.value = [];
  }
};
  // 获取表格数据
  const getTbaleData = async () => {
    loading.value = true;
  
    try {
      const res = await gameRecommendListApi(param());
      loading.value = false;
      tableData.value = res.data.results;
      pageable.total = res.data.count;
    } catch (error) {
      loading.value = false;
    }
  };
  // 查询
  const onQuery = () => {
    console.log("onQuery");
    getTbaleData();
  };
  // 重置
  const onReset = () => {
    Object.assign(form, formData);
  };
  // 新增
  const onAdd = async () => {
    dialogVisible.value = true;
    btnType.value = "add";
  };
  //关闭弹窗
  const closeDialog = () => {
    dialogVisible.value = false;
    btnType.value = null;
    Object.assign(dialogForm, dialogFormData);
  };
  
  // 取消
  const cancel = () => {
    dialogVisible.value = false;
    btnType.value = null;
    Object.assign(dialogForm, dialogFormData);
  };
  // 提交
  const submit = async param => {
    delete param.src;
    try {
      btnLoading.value = true;
      if (btnType.value == "add") {
        delete param.id;
        const res = await gameRecommendUpdateApi(param);
  
        ElMessage({
          message: res.message,
          type: "success"
        });
      }
      if (btnType.value == "edit") {
        // console.log(param);
        const res = await gameRecommendUpdateApi(param);
  
        ElMessage({
          message: res.message,
          type: "success"
        });
      }
  
      dialogVisible.value = false;
      btnLoading.value = false;
      getTbaleData();
    } catch (error) {
      btnLoading.value = false;
      dialogVisible.value = false;
    }
  };
  
  const handleOperate = async (index, row, type) => {
    // 编辑
    if (type === "edit") {
      btnType.value = "edit";
      Object.assign(dialogForm, { ...row });
      dialogVisible.value = true;
    }
  };
  
  // 条数
  const handleSizeChange = number => {
    pageable.pageSize = number;
    getTbaleData();
  };
  // 页码
  const handleCurrentChange = number => {
    pageable.pageNum = number;
    getTbaleData();
  };
  onMounted(() => {
    getTbaleData();
    getGameCategoryList();  
  });
  </script>
  